<template>
    <div>
        <div class="menu_list">
            <div v-for="(item, index) in menuList" :key="index">
                <div class="menu_title" @click="editMenu('open', item)">
                    {{item.menuName}}
                    <i class="icon-edit"></i>
                </div>
                <div class="sub_list">
                    <div class="sub_item" v-for="(i, idx) in item.subs" :key="idx" @click="editMenu('open', i, item)">
                        <p>{{i.menuName}}</p>
                        <i class="icon-edit"></i>
                    </div>
                    <div  v-if="item.subs.length < 5" @click="editMenu('open', null, item)" class="sub_item add_new">+新增菜单</div>
                </div>
            </div>
            <div class="publish">
                <div v-if="menuList.length < 3" @click="editMenu('open')" class="add_first_menu btn">新增一级菜单</div>
                <div class="btn" @click="publishToWx">发布</div>
            </div>
        </div>

        <pub-lo-popup 
            title="编辑菜单" 
            ref="menuEdit" 
            type="bottom" 
            :showBtn="false">
            <div class="edit_menu_popup">
                <div class="cell">
                    <div class="cell_item">
                        <span class="label">排序</span>
                        <div class="value">
                            <input type="text" v-model="edit.menuSort" placeholder="请输入排序数字" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">菜单名称</span>
                        <div class="value">
                            <input type="text" v-model="edit.menuName" placeholder="请输入菜单名称" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">菜单类型</span>
                        <div class="value">
                            <picker mode="selector" :range="menuTypeList" @change="menuTypeChange">
                                <div class="w400 flex-v-center flex-end">
                                    <span :class="{placeholder: !edit.menuType }">{{edit.menuType || '请选择'}}</span>
                                </div>
                            </picker>
                        </div>
                    </div>
                    <div class="cell_item" v-if="edit.menuType == 'view'">
                        <span class="label">跳转链接</span>
                        <div class="value">
                            <textarea maxlength="-1" v-model="edit.menuUrl" placeholder="请输入跳转链接" placeholder-class="placeholder"></textarea>
                        </div>
                    </div>
                    <template v-if="edit.menuType == 'miniprogram'">
                        <div class="cell_item" >
                            <span class="label">小程序内部ID</span>
                            <div class="value">
                                <input type="text" v-model="edit.appOwxId" placeholder="请输入小程序内部ID" placeholder-class="placeholder">
                            </div>
                        </div>
                        <div class="cell_item">
                            <span class="label">小程序路径</span>
                            <div class="value">
                                <textarea maxlength="-1" v-model="edit.pagePath" placeholder="请输入小程序路径" placeholder-class="placeholder"></textarea>
                            </div>
                        </div>
                    </template>
                    <template v-if="edit.menuType == 'click'">
                        <div class="cell_item" >
                            <span class="label">菜单键值</span>
                            <div class="value">
                                <input type="text" v-model="edit.menuKey" placeholder="请输入菜单键值" placeholder-class="placeholder">
                            </div>
                        </div>
                        <div class="cell_item">
                            <span class="label">回复内容</span>
                            <div class="value">
                                <textarea maxlength="-1" v-model="edit.replyText" placeholder="请输入回复内容" placeholder-class="placeholder"></textarea>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="btns">
                    <div v-if="edit.id" class="delete_btn btn" @click="editMenu('delete')">删除</div>
                    <div class="save_btn btn" @click="editMenu('confirm')">保存</div>
                </div>
            </div>
        </pub-lo-popup>
    </div>
</template>

<script>
import { getWxMenus, postWxMenu, editWxMenu } from '@/request/sys'
export default {
    data() {
        return {
            menuList: [],
            menuTypeList: [ 'click', 'view','miniprogram' ],
            edit: {
                parentId: '',
                menuName: '', //菜单名称
                menuSort: '', //排序
                menuType: '', //菜单类型
                menuKey: '', //菜单键值
                menuUrl: '', //跳转地址
                appOwxId: '', //内部id
                pagePath: '', //小程序地址
                replyText: '', //自动回复
            }
        }
    },
    onLoad() {
        if(this.$store.getters.isSuperManger) {
            this.getMenuList()
        }
    },
    methods: {
        getMenuList() {
            getWxMenus().then(res => {
                this.menuList = res.data
            })
        },
        menuTypeChange(e) {
            let index = e.detail.value
            this.edit.menuType = this.menuTypeList[index]
        },
        editMenu(type, item, pItem) {
            if(type == 'open') {
                if(item) {
                    this.edit = { ...item }
                } else {
                    this.edit = {
                        parentId: pItem ? pItem.id : '0',
                        menuName: '', //菜单名称
                        menuSort: '', //排序
                        menuType: '', //菜单类型
                        menuKey: '', //菜单键值
                        menuUrl: '', //跳转地址
                        appOwxId: '', //内部id
                        pagePath: '', //小程序地址
                        replyText: '', //自动回复
                    }
                }
                this.$refs.menuEdit.open()
            } else if(type == 'delete') {
                this.$interact.modal({
                    title: '提示',
                    content: '是否删除？',
                    showCancel: true
                }).then(action => {
                    if(action.confirm) {
                        editWxMenu({
                            id: this.edit.id,
                            isDel: '01'
                        }).then(res => {
                            this.$refs.menuEdit.close()
                            this.$interact.toast(res.msg)
                            this.getMenuList()
                        })
                    }
                })
            } else if(type == 'confirm') {
                editWxMenu({
                    id: this.edit.id,
                    parentId: this.edit.parentId,
                    menuName: this.edit.menuName, //菜单名称
                    menuSort: this.edit.menuSort, //排序
                    menuType: this.edit.menuType, //菜单类型
                    menuKey: this.edit.menuKey, //菜单键值
                    menuUrl: this.edit.menuUrl, //跳转地址
                    appOwxId: this.edit.appOwxId, //内部id
                    pagePath: this.edit.pagePath, //小程序地址
                    replyText: this.edit.replyText, //自动回复
                }).then(res => {
                    this.$refs.menuEdit.close()
                    this.$interact.toast(res.msg)
                    this.getMenuList()
                })
            }
        },
        async publishToWx() {
            let action = await this.$interact.modal({
                title: '提示',
                content: '是否发布到微信？',
                showCancel: true
            })
            if(action.confirm) {
                postWxMenu().then(res => {
                    this.$interact.modal(res.msg).then(() => {
                        this.$navigate.back()
                    })
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>

.menu_list{
    padding-bottom: 150rpx;
    .menu_title{
        width: 100%;
        padding: 20rpx 25rpx;
        font-size: 36rpx;
        font-weight: bold;
        background: #fff;
        display: flex;
        i{
            color: @mainColor;
            margin-left: 10rpx;
        }
    }
    .sub_list{
        background: #fff;
        padding: 25rpx 0 25rpx 25rpx;
        display: flex;
        flex-wrap: wrap;
        .sub_item{
            width: 225rpx;
            height: 80rpx;
            background: #f2f2f2;
            border-radius: 10rpx;
            margin-right: 15rpx;
            margin-bottom: 15rpx;
            padding: 0 15rpx;
            .align(v-center);
            p{
                flex: 1;
                font-size: 30rpx;
                color: #333;
            }
            i{
                font-size: 24rpx;
                color: #ccc;
            }
            &:nth-child(3n) {
                margin-right: 0;
            }
        }
        .add_new{
            background: @mainColor;
            color: #fff;
        }
    }
}

.edit_menu_popup{
    .cell{
        .cell_item{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 90rpx;
            border-bottom: 1rpx solid #eee;
            padding: 10rpx 20rpx;
            font-size: 28rpx;
            .label{
                width: 200rpx;
                color: #666;
                margin-right: 20rpx;
            }
            .value{
                flex: 1;
                input{
                    width: 100%;
                    text-align: right;
                }
                textarea{
                    width: 480rpx;
                    height: 200rpx;
                    border: 1rpx solid #eee;
                    border-radius: 10rpx;
                    margin: 10rpx 0;
                    padding: 10rpx;
                }
            }
        }
    }
    .btns{
        display: flex;
        padding: 30rpx 30rpx 0;
        justify-content: space-between;
        .btn{
            color: #FFF;
            background: @mainColor;
            border-radius: 45rpx;
            .align(center, column);
        }
        .delete_btn{
            width: 200rpx;
            height: 80rpx;
            background: red;
            margin-right: 30rpx;
        }
        .save_btn{
            flex: 1;
            height: 80rpx;
        }
    }
}

.publish{
    width: 100%;
    position: fixed;
    bottom: 20rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    .btn{
        flex: 1;
        height: 80rpx;
        .align(center);
        border-radius: 40rpx;
        background: @mainColor;
        color: #fff;
    }

    .add_first_menu{
        flex: none;
        width: 225rpx;
        margin-right: 30rpx;
        background: #137213;
        color: #fff;
    }
}

</style>